<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/multiPage.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
<link rel="stylesheet"  href="${ctxStatic }/wx/css/tourism.css"/>
<script src="${ctxStatic }/jquery/jquery-1.8.3.min.js"></script>
<script src="${ctxStatic }/wx/js/tourism.js"></script>
<script src="${ctxStatic }/wx/components/font-awesome/js/fontSize.js" ></script>
<link rel="stylesheet"  href="${ctxStatic }/wx/components/font-awesome/css/font-awesome.min.css"/>
<script type="text/javascript">
$(function(){
	$.post("${ctxFront }/sms/ipLocation", function(d) { //d==城市名
		$('#depart').val(d);
	});
})
</script>
</head>
<body class="mui-fullscreen">
	<!--页面主结构开始-->
	<div id="app" class="mui-views">
		<div class="mui-view">
			<div class="mui-navbar">
			</div>
			<div class="mui-pages">
			</div>
		</div>
	</div>
	<div id="query" class="mui-page">
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;" href="${ctxWx}/pu/index"></a>
			<h1 class="mui-center mui-title" style="color: #fff;">旅游包车</h1>
		</div>
		<div class="mui-page-content">
			<div class="mui-scroll-wrapper">
				  	<div class="mui-scroll">
		<section class="menu">	
				    <div class="slid">
				        <div class="slider">
				            <ul class="slider-main">
				            <c:forEach items="${rentGroupList}" var="index">
				                 <li class="slider-panel">
				                    	<img alt="" src="https://www.xiakeyueche.com${index.tLine.linepic }"  >
				                </li>
				            </c:forEach>     
				            </ul>
				            <div class="slider-extra">
				                <ul class="slider-nav">
				                    <li class="slider-item"></li>
				                    <li class="slider-item"></li>
				                    <li class="slider-item"></li>
				                    <li class="slider-item"></li>
				                </ul>
				            </div>
				        </div>
				    </div>
			</section>
			<section class="goods  container">
             <form id="queryForm" action="${ctxWx }/rentproduct/getTravelList" method="get">
					<div class="search bar1">
								        <input id="travelType" type="hidden" name="tabType" value="${tRentproduct.tabType }" />
								        <input type="hidden" name="rentType" value="${ORDER_TYPE_RENTPRODUCT_TRAVEL }"/>
								        <input id="pageNo" name="pageNo" type="hidden" value="1"/>
										<input id="pageSize" name="pageSize" type="hidden" value="500"/>
										 <input id="destination" name="destination" type="hidden" value="${destination }"/> 
										<input id="estday" name="estday" type="hidden" value="${day }"/>
								        <div class="moves">
								          <div class="box mui-col-xs-4">
								            <img src="${ctxStatic }/wx/images/xiala.png" class="bg">
								             <span class="zb-md " id="tabtype">周边游包车</span>
								             <div class="zbmd-box">
								                  <div class="md zmdb "><span id="tabtype">目的地包车</span></div>
								             </div>
								         </div>
								         <div class="load mui-col-xs-5">
										     <input class="departCode" name="departcity.siteid" type="hidden" ${empty tRentproduct.departcity.siteid?'data-autocity="yes"':'' } value="${tRentproduct.departcity.siteid }"/>
										     <input class="departName opt-city-choose citys" data-type="0,b" name="departcity.sitename" type="text" id="depart" value="" placeholder="点击选择出发地" readonly />
								         </div>
								          <div class="mui-col-xs-3 bbq">
								         	   <img src="${ctxStatic }/wx/img/antain/didian_antianbaoche@2x.png">
								               <h5>当前城市</h5>
								          </div>
									  </div>
						</div>
							<div>
									<input type="hidden" id="cityRecord"/>
									<input type="hidden" id="spottypes"/>
								<div class="mui-content-padded">
									<button type="button" class="mui-btn mui-btn-primary mui-btn-block inquiry" onclick="subForm();">查询</button>
								</div>
								<div class="fix-bottom2"></div>
							</div>
		</form>
						</section>
			</div>
	</div> 
		</div>
	</div> 
	<!-- 站点选择页 -->
	<div id="city" class="mui-page">
		<div class="city-bar mui-navbar-inner mui-bar mui-bar-nav">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-center mui-title">选择站点</h1>
		</div>
		<div class="mui-page-content">
			<div id="list" class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
			</div>
		</div>
	</div>
	<c:set var="include_location" value="yes"/>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script src="${ctxStatic }/mui/js/mui.view.js"></script>
	<script src="${ctxStatic }/mui/js/mui.indexedlist.js"></script>
	<script src="${ctxStatic }/mui/js/mui.picker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.dtpicker.js"></script>
	<script src="${ctxStatic }/mui/js/mui.poppicker.js"></script>
	<script>
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#query'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
			
				if(e.detail.page.id == 'city') {
				var root=document.getElementsByClassName("city-bar")[0];
                       root.style.cssText="background-color:white;";
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);
		
		var cityHtml = '';
		var destHtml = '';
		$(function(){
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});
			
			// 选择城市
			$('.opt-city-choose').on('tap',function(){
				if($(this).hasClass('departName')) {
					$('#cityRecord').val('depart');
				}
				if($(this).hasClass('destName')) {
					$('#cityRecord').val('dest');
				}
				$('#spottypes').val($(this).attr('data-type'));
				viewApi.go('#city');
			});
		});
		
		// 提交查询表单
		function subForm() {
			var msg = '';
			var boardaddrName = $('input[name="departcity.sitename"]').val();
			var tabtype = $("#tabtype").text();
			$('#travelType').val(tabtype);
			if(boardaddrName == ''){
				msg = '请填写出发地';
			} 
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#queryForm').submit();
			}
		}
		
		// 获取站点数据
		function getSiteData() {
			var spottypes = $('#spottypes').val();
			var loaded = false; // 已加载
			var html = '';
			
			if(spottypes == '0,b' && cityHtml != '') {
				loaded = true;
				html = cityHtml;
			}
			if(spottypes == '0,2,b' && destHtml != '') {
				loaded = true;
				html = destHtml;
			}
			
			if(!loaded){			
				$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
				$.post('${ctxWx}/data/site/siteJson',{spottypes:spottypes}, function(data) {
					for(var i=0; i<data.length; i++) {
						var item = data[i];
						html += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
						for(var j=0; j<item.list.length; j++) {
							var site = item.list[j];
							html += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
							html += site.sitename;
							html += '</li>';
						}
					}
					if(spottypes == '0,b') {
						cityHtml = html;
					}
					if(spottypes == '0,2,b') {
						destHtml = html;
					}
					$('#indexListContent').html(html);
					// 初始化站点数据
					$('#cityStyle').remove();
					var header = document.querySelector('.city-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					new mui.IndexedList(list).search('');
				});
			} else {
				$('#indexListContent').html(html);
				// 初始化站点数据
				$('#cityStyle').remove();
				var header = document.querySelector('.city-bar');
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				new mui.IndexedList(list).search('');
			}
		}
		// 站点输入框赋值
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'depart') {
				$('.departCode').val(item.attr('data-value'));
				$('.departName').val(item.attr('data-name'));
			} else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#query');
		}
	</script>
</body>
</html>